$(function(){
    $('#keyWord').on('keyup',function(){
        var keyword = $(this).val();
        console.log(keyword);
        if(keyword !== '' && keyword !==null && keyword.length !==0){
            $.ajax({
                type    :'GET',
                url     :'/getProductListByKeyForJS?keyword=' + keyword,
                success :function (data){
                    console.log(data);
                    data=data.data;
                    console.log(data);
                    var productListHTML = '';
                    for(var i=0; i<data.length;i++){
                        productListHTML += '<li class=\"productAutoItem\" data-productId="';
                        productListHTML += data[i].productid;
                        productListHTML += '">';
                        productListHTML += data[i].category;
                        productListHTML += ': ';
                        productListHTML += data[i].name;
                        productListHTML += '</li>';
                    }
                    $('#productAutoList').html(productListHTML);
                    $('#productAutoComplete').show();
                    $('#productAutoItem').show();
                },
                error   :function (errorMsg){
                    console.log(errorMsg);
                }
            });
        }else{
            $('#productAutoComplete').hide();
        }
    });
    $(document).on('click', '.productAutoItem', function (){
        var productId = $(this).data('productid');
        $('#productAutoComplete').hide();
        $('#keyWord').val('');
        window.location.href = 'http://localhost:8080/productForm?productId=' + productId;
    });

    $('#productAutoComplete').on('mouseleave', function (){
        $(this).hide();
        $('#keyWord').val('');
    })
});